<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>coway</title>
  <link rel="stylesheet" href="./css/element.css">
    <link rel="stylesheet" href="./css/common.css?v=0.1">
  <style>
    .signatureBox {
      position: relative;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      overflow: hidden;
      background: #fff;
      z-index: 100;
      display: flex;
      flex-direction: column;
    }

    .visaDetailTop {
      /*position: absolute;*/
      /*top: 0px;*/
      /*left: 0px;*/
      width: 100%;
      /*overflow: hidden;*/
      padding: 5px;
      box-sizing: border-box;
      z-index: 2;
      border-bottom: 1px solid #e5e5e5;
    }

    .visaDetailTop p {
      margin: 0px;
      text-align: center;
      color: #000;
      font-size: 1em;
      position: relative;
    }

    p.visaTitle {
      width: 100%;
      position: absolute;
      top: 5px;
      left: 0px;
      text-align: center;
      font-size: 1.2em;
    }

    .btnBack {
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: transparent;
      border-color: transparent;
      outline: none;
    }

    .btnDaoHang {
      display: block;
      position: absolute;
      left: 0px;
      top: 0px;
      height: 2.2em;
      width: 2em;
      z-index: 1;
      background: transparent;
      border-color: transparent;
      outline: none;
    }

    .visaDetailTop p span {
      color: #fff;
      font-size: 1.2em;
    }

    .visaDetailTop p:first-of-type {
      float: left;
    }

    .visaDetailTop p:nth-of-type(2) {
      float: right;
    }

    .canvasBox {
      padding: 10px 5px;
      box-sizing: border-box;
      flex: 1;
    }

    canvas {
      border: 1px solid #71b900;
    }

    .btnBox {
      height: 30px;
      padding: 5px;
      text-align: right;
      line-height: 30px;
    }

    .btnBox button:first-of-type {
      border: 1px solid #71b900;
      background: transparent;
      border-radius: 4px;
      padding: 5px 10px;
    }

    .btnBox button:last-of-type {
      border: 1px solid #71b900;
      background: #71b900;
      color: #fff;
      border-radius: 4px;
      padding: 5px 10px;
    }

    @media only screen and (min-width: 750px) {
      .signatureBox {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        min-height: 100%;
        box-sizing: border-box;
        overflow: visible;
      }
    }
  </style>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="header">
      <img src="./img/logo.png" width="120px" alt="" class="log">
    </div>
    <div class="body">
      <p
        style="color: #00A7E1; border-bottom: 1px solid #DCDFE6; padding: 20px 0; font-weight: bold;">
        请签名，确认以上信息无误。
      </p>
      <img :src="img" />
      <div class="signatureBox" style="height: 60vh;">
        <div class="canvasBox" ref="canvasHW">
          <canvas @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' ref="canvasF"
            @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></canvas>
          <div class="btnBox">
            <el-button @click="overwrite">重写</el-button>
            <el-button @click="uploadSgin">提交签名</el-button>
          </div>
        </div>
      </div>
</div>

    </div>
</body>
<script src="./js/axios.js"></script>
<!-- import Vue before Element -->
<script src="./js/vue.js"></script>
<!-- import JavaScript -->
<script src="./js/elementui.js"></script>
<script src="./js/common.js"></script>
<script>
  let canvas = null;
  new Vue({
    el: '#app',
    data() {
      return {
        loading: false,
        img: '',
        points: [],
        canvasTxt: null,
        startX: 0,
        startY: 0,
        moveY: 0,
        moveX: 0,
        endY: 0,
        endX: 0,
        w: null,
        h: null,
        isDown: false
      }
    },
    created() {

    },
    mounted() {
      canvas = this.$refs.canvasF;
      canvas.height = this.$refs.canvasHW.offsetHeight - 60;
      canvas.width = this.$refs.canvasHW.offsetWidth - 10;
      this.canvasTxt = canvas.getContext("2d");
    },
    components: {
      // NavPublic
    },
    methods: {
      uploadSgin() {
        this.loading = true
        var dataurl = this.convertImageToCanvas(); //base64图片数据
        var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        var obj = new Blob([u8arr], {
          type: mime
        });
        var fd = new FormData();
        fd.append("file", obj, "image.png");
        axios({
          url: window.baseUrl + '/api/app/order/uploadSignatureImage/' + getQueryVariable('id'),
          method: "POST",
          processData: false,
          contentType: false,
          data: fd,
        }).then(res => {
          this.loading = true
          location.href = '/success.html'
        }, err => {
          this.loading = true
          console.log(err, 'err')
          this.$message.error('服务器异常，请稍后重试！')
        })

      },
      //电脑设备事件
      mouseDown(ev) {
        ev = ev || event;
        ev.preventDefault();
        console.log(ev);
        if (1) {
          let obj = {
            x: ev.offsetX,
            y: ev.offsetY
          };
          console.log(obj);
          this.startX = obj.x;
          this.startY = obj.y;
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.lineWidth = 5;
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.points.push(obj);
          this.isDown = true;
        }
      },
      //移动设备事件
      touchStart(ev) {
        ev = ev || event;
        ev.preventDefault();
        if (ev.touches.length == 1) {
          let obj = {
            x: ev.targetTouches[0].clientX,
            y: ev.targetTouches[0].clientY-180
          };
          this.startX = obj.x;
          this.startY = obj.y;
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.lineWidth = 5;
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.points.push(obj);
        }
      },
      //电脑设备事件
      mouseMove(ev) {
        ev = ev || event;
        ev.preventDefault();
        if (this.isDown) {
          let obj = {
            x: ev.offsetX,
            y: ev.offsetY
          };
          this.moveY = obj.y;
          this.moveX = obj.x;
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.lineWidth = 5;
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.startY = obj.y;
          this.startX = obj.x;
          this.points.push(obj);
        }
      },
      //移动设备事件
      touchMove(ev) {
        ev = ev || event;
        ev.preventDefault();
        if (ev.touches.length == 1) {
          let obj = {
            x: ev.targetTouches[0].clientX,
            y: ev.targetTouches[0].clientY-180
          };
          this.moveY = obj.y;
          this.moveX = obj.x;
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.lineWidth = 5;
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.startY = obj.y;
          this.startX = obj.x;
          this.points.push(obj);
        }
      },
      //电脑设备事件
      mouseUp(ev) {
        ev = ev || event;
        ev.preventDefault();
        if (1) {
          let obj = {
            x: ev.offsetX,
            y: ev.offsetY
          };
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.lineWidth = 5;
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.points.push(obj);
          this.points.push({ x: -1, y: -1 });
          this.isDown = false;
        }
      },
      //移动设备事件
      touchEnd(ev) {
        ev = ev || event;
        ev.preventDefault();
        console.log(ev);
        if (ev.touches.length == 1) {
          let obj = {
            x: ev.targetTouches[0].clientX,
            y: ev.targetTouches[0].clientY-180
          };
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.lineWidth = 5;
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.points.push(obj);
          this.points.push({ x: -1, y: -1 });
        }
      },
      //重写
      overwrite() {
        this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height);
        this.points = [];
      },
      convertImageToCanvas() {
        var image = new Image();
        image.width = 300
        image.src = canvas.toDataURL("image/png");
        console.log(image.src, 11111111111)
        this.img = image.src
        return image.src
      }
    }
  })
</script>

</html>